<script setup lang="ts">
import { computed, useSlots } from "vue";

const props = defineProps<{
  header?: string;
  footer?: string;
}>();

const slots = useSlots();

const showHeader = computed(() => {
  const slotHeader = slots.header?.();
  return !!props.header || !!slotHeader;
});

const showFooter = computed(() => {
  const slotFooter = slots.footer?.();
  return !!props.header || !!slotFooter;
});
</script>

<template>
  <view class="bg-white px-3 rounded-md m-3 shadow-lg">
    <view
      class="py-3 border-0 border-b border-solid border-[#ddd]"
      v-if="showHeader"
    >
      <slot name="header">
        <text class="font-bold">{{ header }}</text>
      </slot>
    </view>

    <view class="py-3">
      <slot />
    </view>

    <view
      v-if="showFooter"
      class="py-3 border-0 border-t border-solid border-[#ddd]"
    >
      <slot name="footer" />
    </view>
  </view>
</template>
